<route lang="json5" type="page">
  {
    "name": "faq",
    "layout": "default",
    "style": {
      "disableScroll": true,
      "navigationStyle": "default",
      "enablePullDownRefresh": false,
      "navigationBarBackgroundColor": "#F8F8F8",
      "navigationBarTitleText": "常见问题"
    }
  }
</route>

<script setup>
import {
  faqList,
  handleContactService,
  toggleFaq,
} from './index'
</script>

<template>
  <view class="faq-container">
    <!-- 页面标题 -->
    <view class="faq-header">
      <view class="header-title">
        <wd-icon name="help-circle" size="48rpx" color="#4f46e5" />
        <text class="title-text">
          常见问题
        </text>
      </view>
      <text class="header-subtitle">
        为您解答使用过程中的疑问
      </text>
    </view>

    <!-- FAQ列表 -->
    <view class="faq-list">
      <view
        v-for="(item, index) in faqList"
        :key="item.id"
        class="faq-item"
        :class="{ expanded: item.expanded }"
        @click="toggleFaq(index)"
      >
        <view class="faq-question">
          <text class="question-text">
            {{ item.question }}
          </text>
          <wd-icon
            :name="item.expanded ? 'arrow-up' : 'arrow-down'"
            size="32rpx"
            color="#999"
            class="expand-icon"
          />
        </view>
        <view class="faq-answer" :class="{ show: item.expanded }">
          <text class="answer-text">
            {{ item.answer }}
          </text>
        </view>
      </view>
    </view>

    <!-- 浮动联系客服按钮 -->
    <button class="reset-button" open-type="contact">
      <wd-fab position="right-bottom" :expandable="false">
        <template #trigger>
          <wd-button
            icon="service"
            type="primary"
            size="medium"
            round
          >
            联系客服
          </wd-button>
        </template>
      </wd-fab>
    </button>
  </view>
</template>

<style scoped lang='scss'>
@import './index.scss';
</style>
